<template>
    <el-dialog
        title="字段"
        :visible.sync="dialogVisible"
        width="30%">
        <div class="tagBox">
        <span class="itemTag" :class="{active:currentIndex==index}" v-for="(item, index) in  tagList" :key="index"
              @click="chooseTag(item)">{{ item.itemValue }}</span>
        </div>
    </el-dialog>
</template>

<script>


export default {
    components: {},
    props: ['tagList'],
    data() {
        return {
            dialogVisible: false,
            hover: false,
            currentIndex: -1,
        }
    },
    computed: {},
    // 方法集合
    methods: {
        show() {
            this.dialogVisible = true;
        },
        chooseTag(item) {
            this.$bus.$emit('addTag', item)
            this.$emit('addParam', item)
            this.dialogVisible = false
        },
    },
    created() {

    },
    // 生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {
    },

}
</script>

<style lang="scss" scoped>
.tagBox {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    max-height: 300px;
    overflow: auto;

    .itemTag {
        padding: 0 10px;
        border: 1px solid #1890FF;
        height: 40px;
        line-height: 40px;
        border-radius: 10px;
        text-align: center;
        margin: 5px;
        font-size: 14px;
        background: #FFFFFF;
        color: #1890FF;

        //&.active {
        //  background: #0f820f;
        //  color: #FFFFFF;
        //}
        &:hover {
            background: #1890FF;
            color: #FFFFFF;
        }
    }
}
</style>
